前兩天我們將專案傳到 Github 上，也成功部署了。
今天我們要用 Github Actions 來協助我們做 CI/CD，所謂的 CI/CD 包含了三個主要的概念：持續整合、持續交付、持續部署，旨在透過自動化的流程來降低開發人員手動操作、人確認所需耗費的工。
而 Github Actions 則整合了一些 CI/CD 的流程，讓我們可以設定觸發的條件去啟用 CI/CD 所設定的工作流程。

Lighthouse-CI

CI/CD 我也是第一次弄...今天選擇以這篇文章：Day03 X Performance Analyzers feat. Lighthouse-CI 所推薦的 lighthouse-cli 來作為第一次的 CI 設定！
lighthouse 是一個可以檢測你的網站評分、SEO 與效能的服務，可以透過安裝 Chrome extension 來嘗試看看。
我們希望設定完這個 lighthouse-ci 後能在每次的 commit push 以及 pull request 發出後，自動去跑這個流程。

Steps

1. 首先我們要先安裝 github app 上的 lighthouse-ci，安裝完之後會有以下的畫面：
   

2. 我們將產生的 tocken 用 LHCI_GITHUB_APP_TOKEN 放到你的 build 環境。

3. 打開專案的 Settings 頁面，到左側側邊欄的 Security 選擇 Actions 後新增：
   

4. 再來拿官方文件中所提供的 yml 檔案來設定，依據路徑來新增下面的 yml 檔案：
   .github/workflows/ci.yml

   name: CI
   on: [push]
   jobs:
     lhci:
       name: Lighthouse
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - name: Use Node.js 12.x
           uses: actions/setup-node@v1
           with:
             node-version: 12.x
         - name: npm install, build
           run: |
             npm install
             npm run build
         - name: run Lighthouse CI
           run: |
             npm install -g @lhci/cli@0.8.x
             lhci autorun
           env:
             LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
   

5. 新增一個 configuration 的設定檔在 root 資料夾層級，這邊使用官方文件所建議給入門使用者的設定，我們先監測上傳的分數就好。

   If you're just beginning to measure your project with Lighthouse, start slowly and manually monitor your scores first by only configuring upload. Once you're comfortable, consider moving up to Intermediate.

   root/.lighthouserc.json

   {
     "ci": {
       "collect": {
         "staticDistDir": "./"
       },
       "upload": {
         "target": "temporary-public-storage"
       }
     }
   }
   

恭喜完成！！！

到這邊就算成功綁到 CI workflow 上面了！

之後我們在 push 與發送 pull request 的時候就會就會去跑剛剛所設定的 lighthouse-ci 了，我們可以在 Github Actions 的紀錄中點進去看 run Lighthouse CI 的結果，裡面會有這次跑的報告可以看：

Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1664039492055-2623.report.html

當我們建立了一個 PR 時，也可以看到 Github Actions 去跑我們所設定的 CI workflow：

點擊 Details 就可以到 Lighthouse-CI 所產生的報告。

Repo 連結：https://github.com/zoeGuava/ithome2022-github-demo/actions/workflows/ci.yml

參考

今晚，我想來點 Web 前端效能優化大補帖！ - 莫力全 Kyle Mo
Day03 X Performance Analyzers feat. Lighthouse-CI

GoogleChrome - lighthouse-ci
Introduction to CI

官方建議的 ci.yml（含 github token 設定）
aGitHub App Method (Recommended)

CI/CD 的介紹文章
CI/CD (持續性整合 / 部署) - 因為懶，所以更要 CI/CD！概念講解！
What is CI/CD?